<template>
    <div class="page-container" style="width:99%;margin-top:15px;">
        <el-carousel :interval="15000" type="card" height="590px" class="carousel">
            <el-carousel-item class="carousel-item-intro common">
                <h2>项目介绍</h2>
                <ul>
                    <li>基于 Spring Boot、Vue、Element 的知识平台</li>
                    <li>旨在提供碎片化以及系统化知识点，用于碎片化时间与连续性时间内阅读</li>
                    <li>后续将对资源持续增加，优化，整合</li>
                </ul>
                <div><img src="@/assets/logo.png" style="width:120px;height:120px;padding-top:15px;" /></div>
            </el-carousel-item>
            <el-carousel-item class="carousel-item-func common">
                <h2>功能计划</h2>
                <ul>
                    <li>✔ 系统登录：系统用户注册、登录</li>
                    <br/>
                    <li>✔ 用户管理：个人信息管理、个人空间</li>
                    <br/>
                    <li>✔ 机构管理：企业内容管理</li>
                    <br/>
                    <li>✔ 个人痕迹：个人统计信息展示</li>
                    <br/>
                    <li>✔ 主题切换：支持主题切换，自定主题颜色，一键换肤</li><br/>
                    <li>✔ 系统架构：调整为Spring Cloud，以及其他服务整合</li><br/>
                    <li>✔ 服务治理：集成Spring Cloud，实现全方位服务治理</li>
                </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-item-env common">
                <h2>开发环境</h2>
                <ul>
                    <li>IDE : idea、eclipse。     JDK : JDK 1.8.x。</li>
                    <li>Maven : Maven 3.5.x。   MySQL: MySQL 5.7.x。</li>
                    <li>IDE : idea。    Webpack：webpack 3.2.x。</li>
                    <li>NODE: Node 8.9.x。      NPM : NPM 6.4.x。</li>
                </ul>
                <h2>技术选型</h2>
                <ul>
                    <li>核心框架：Spring Boot 2.x。  </li>
                    <li>视图框架：Spring MVC 5.x。   持久层框架：JPA 、MyBatis 3.x。</li>
                    <li>数据库连接池：Druid 1.x。    </li>
                    <li>前端框架：Vue.js 2.x。       页面组件：Element 2.x。</li>
                    <li>状态管理：Vuex.js 2.x。      后台交互：axios 0.18.x、Restful。</li>
                </ul>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>


<style>
    .carousel {
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 20px;
    }
    .carousel h2 {
        color: #475669;
        font-size: 22px;
        opacity: 1.75;
        line-height: 100px;
        margin: 0;
    }
    .carousel ul {
        color: #475669;
        font-size: 15px;
        opacity: 1.75;
        line-height: 40px;
        margin: 0;
    }
    .carousel-item-intro h2 {
        color: #ffffff;
        font-size: 22px;
        opacity: 1.75;
        line-height: 80px;
        margin: 0;
    }
    .carousel-item-intro ul {
        color: #ffffff;
        font-size: 15px;
        opacity: 1.75;
        line-height: 65px;
        padding: 5px;
        margin: 0;
    }
    .carousel-item-func h2 {
        color: #3f393b;
        font-size: 22px;
        opacity: 1.75;
        line-height: 50px;
        margin: 0;
    }
    .carousel-item-func ul {
        color: #3f393b;
        font-size: 15px;
        opacity: 1.75;
        line-height: 30px;
        text-align: left;
        padding-left: 90px;
        margin: 0;
    }
    .carousel-item-env h2 {
        color: #475669;
        font-size: 22px;
        opacity: 1.75;
        line-height: 50px;
        margin: 0;
    }
    .carousel-item-env ul {
        color: #475669;
        font-size: 15px;
        opacity: 1.75;
        line-height: 35px;
        text-align: left;
        padding-left: 110px;
        margin: 0;
    }
    .common {
        background-color: #19aaaf73;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        -moz-border-radius: 15px;
        background-clip: padding-box;
        box-shadow: 0 0 25px #a3b3b965;
    }
    .carousel-item-intro {
        background-color: #b95e5e;
    }
    .carousel-item-func {
        background-color: #52c578;
    }
    .carousel-item-env {
        background-color: #41a7b9;
    }
</style>
